<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- vue -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>

    <body>
        <div id="app">
            <div id="buttom-container">
                <el-button type="info" @click="isShow(false)">隐藏工具栏</el-button>
                <el-button type="info" @click="isShow(true)">显示工具栏</el-button>
                <el-button type="info" @click="showToolbar = !showToolbar">自定义工具栏</el-button>
            </div>
            <el-dialog
                title="设置"
                :visible.sync="showToolbar"
                width="30%"
            >
                <el-checkbox-group v-model="toolbarOption">
                    <el-checkbox v-for="item in toolbars" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
                </el-checkbox-group>
            </el-dialog>
            <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
        </div>
        <script id="viewerStartup" type="module">
            import { exampleModelId } from "/examples/js/modelIdEnum.js"
            window.uid = "2cgXCjpDT0ZxBvxMSr3pfm"
            const vm = new Vue({
                el: '#app',
                data: {
                    bimViewer: null,
                    model: "RailUnit/jianzhu",
                    showToolbar: false,
                    toolbarOption: ['_resetAction', '_fitAction', '_threeDMode', '_orthoMode', '_firstPersonMode'],
                    // 选项
                    toolbars: [
                        {
                            value: '_resetAction',
                            label: 'resetAction'
                        },
                        {
                            value: '_fitAction',
                            label: 'fitAction'
                        },
                        {
                            value: '_threeDMode',
                            label: 'threeDMode'
                        },
                        {
                            value: '_orthoMode',
                            label: 'orthoMode'
                        },
                        {
                            value: '_firstPersonMode',
                            label: 'firstPersonMode'
                        },
                    ],
                    // 默认值
                    checkedToolbars: ['_resetAction', '_fitAction', '_threeDMode', '_orthoMode', '_firstPersonMode']
                },
                mounted () {
                    this.bimViewerFn()
                },
                watch: {
                    toolbarOption(n, o) {
                        console.log(n, '工具栏参数');
                        this.bimViewer.setToolbarVis(n)
                    }
                },
                methods: {
                    // 初始化模型
                    bimViewerFn() {
                        this.bimViewer = new MyViewer({
                            serverUrl: '/RailUnit/',
                            containerElement: document.getElementById('viewer'), // WebGL canvas
                            nodeVisible: false,
                            typesVisible: false,
                            stroysVisible:false
                        })
                        this.bimViewer.loadModel2('jianzhu', () => {
                            // console.log('模型加载完成');
                        })
                        console.log(this.bimViewer, 'this.bimViewer');
                    },
                    // 显示隐藏工具栏
                    isShow(state) {
                        this.bimViewer.setToolbarVisible(state)
                        console.log(state, '显示隐藏');
                    },
                }
            })
        </script>
    
    </body>
</html>
